<template>
  <div>
    <el-form :model="info" ref="info" label-width="100px">
      <el-form-item label="用户昵称">
        {{ info.user && info.user.nickname }}
      </el-form-item>
      <el-form-item label="帖子类型"> {{ info.category }}</el-form-item>
      <el-form-item label="帖子标题"> {{ info.title }}</el-form-item>
      <el-form-item label="帖子内容">
        <div style="width: 50%">{{ info.content }}</div></el-form-item
      >

      <el-form-item label="图片/视频">
        <div style="display:inline-block;" v-for="item in info.attachments" :key="item.id">
          <el-image
            v-if="item.filetype === 'image'"
            style="margin-right: 10px; width: 200px; height: 200px"
            shape="square"
            :src="item.attachment"
            :preview-src-list="previewList"
          ></el-image>
          <video
            style="margin-right: 10px; width: 200px; height: 200px"
            v-else
            :src="item.attachment"
            controls
          ></video>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="$router.go(-1)"
          >返回帖子列表</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getInfo } from "@/api/community";

export default {
  props: ["id"],
  computed: {
    previewList() {
      if (this.info.attachments) {
        return this.info.attachments.map((item) => item.attachment);
      }
    },
  },
  data() {
    return {
      info: {},
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    async getInfo() {
      const res = await getInfo({ id: this.id });
      if (res.data) {
        this.info = res.data;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.action {
  padding-left: 100px;
}
</style>